<template>
  <div style="position: relative">
    <div id="edit_view">
      <el-button @click.stop="handleEdit">编辑模式</el-button>
      <el-button @click.stop="handleAdd">绘制模式</el-button>
      <el-button @click.stop="handleMerge">合并</el-button>
      <el-button @click.stop="handleSplit">拆分</el-button>
      <el-button @click.stop="outputArea">输出区域坐标</el-button>
    </div>
    <div id="toolControl">
      <div class="toolItem active" id="marker" title="点标记"></div>
      <div class="toolItem" id="polyline" title="折线"></div>
      <div class="toolItem" id="polygon" title="多边形"></div>
      <div class="toolItem" id="circle" title="圆形"></div>
      <div class="toolItem" id="rectangle" title="矩形"></div>
      <div class="toolItem" id="ellipse" title="椭圆"></div>
    </div>
    <div id="map_view"></div>
  </div>
</template>
   
  <script setup>
import { nextTick, onMounted } from "vue";

let map, editor;
var activeType = "marker";
const props = defineProps({
  centerPoint: {
    type: Array,
    defalut: [40.04019000341765, 116.27446815226199],
  },
});

/**
 * @function 开始绘制地图
 */
const handleAdd = () => {
  // 指定图层处于编辑状态
  //   editor.setActiveOverlay("polygon1");
  editor.setActionMode(2);
};

/**
 * @function 编辑地图
 */
const handleEdit = () => {
  // 指定图层处于操作状态
  editor.setActionMode(1);
};

/**
 * @function 地图合并
 */
const handleMerge = () => {
  editor.union();
};

/**
 * @function 拆分地图
 */
const handleSplit = () => {
  editor.split();
};
const outputArea = () => {
  console.log(editor.getOverlayList());
};
onMounted(() => {
  // TMap.geometry.isPointInPolygon(pos, path)
  console.log(document.getElementById("map_view"));
  console.log(props);
  // 创建地图实例
  document.getElementById("toolControl").addEventListener("click", (e) => {
    var id = e.target.id;
    if (id !== "toolControl") {
      document.getElementById(activeType).className = "toolItem";
      document.getElementById(id).className = "toolItem active";
      activeType = id;
      editor.setActiveOverlay(id);
    }
  });
  nextTick(() => {
    map = new TMap.Map(document.getElementById("map_view"), {
      zoom: 17, // 设置地图缩放级别
      center: new TMap.LatLng(props.centerPoint[0], props.centerPoint[1]),
    });
    // 加载一个初始化的图层
    const firstPaths = [
      new TMap.LatLng(40.04051164600918, 116.27488518619089),
      new TMap.LatLng(40.040943635857445, 116.27804611629756),
      new TMap.LatLng(40.03951759379146, 116.2783762087081),
      new TMap.LatLng(40.03891287066983, 116.2752049655744),
    ];

    // 初始化几何图形及编辑器
    var marker = new TMap.MultiMarker({
      map: map,
    });
    var polyline = new TMap.MultiPolyline({
      map: map,
    });
    var polygon = new TMap.MultiPolygon({
      map: map,
    });
    var circle = new TMap.MultiCircle({
      map: map,
    });
    var rectangle = new TMap.MultiRectangle({
      map: map,
    });
    var ellipse = new TMap.MultiEllipse({
      map: map,
    });
    editor = new TMap.tools.GeometryEditor({
      map,
      // 可编辑图层
      overlayList: [
        // {
        //   id: "polygon1",
        //   selectedStyleId: "highlight",
        //   overlay: new TMap.MultiPolygon({
        //     map,
        //     // 样式
        //     styles: {
        //       highlight: new TMap.PolygonStyle({
        //         color: "rgba(255, 255, 0, 0.6)",
        //       }),
        //     },
        //     geometries: [
        //       {
        //         id: "hhhh",
        //         paths: firstPaths,
        //       },
        //     ],
        //   }),
        // },
        {
          overlay: marker,
          id: "marker",
        },
        {
          overlay: polyline,
          id: "polyline",
        },
        {
          overlay: polygon,
          id: "polygon",
        },
        {
          overlay: circle,
          id: "circle",
        },
        {
          overlay: rectangle,
          id: "rectangle",
        },
        {
          overlay: ellipse,
          id: "ellipse",
        },
      ],
      actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式 DRAW INTERACT
      snappable: true, // 开启邻近吸附
      selectable: true, // 开启点选功能
      activeOverlayId: "maker", // 激活图层
    });

    // 开始监听几何图形
    editor.on("draw_complete", (geometry) => {
      // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
      // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
      var id = geometry.id;
      if (editor.getActiveOverlay().id === "rectangle") {
        // 获取矩形顶点坐标
        var geo = rectangle.geometries.filter(function (item) {
          return item.id === id;
        });
        console.log("绘制的矩形定位的坐标：", geo[0].paths);
      }

      if (editor.getActiveOverlay().id === "polygon") {
        // 获取多边形顶点坐标
        var geo = polygon.geometries.filter(function (item) {
          return item.id === id;
        });
        console.log("绘制的多边形坐标：", geo[0].paths);
      }
    });

    // 监听删除、修改、拆分、合并完成事件
    let evtList = ["delete", "adjust", "split", "union"];
    evtList.forEach((evtName) => {
      editor.on(evtName + "_complete", (evtResult) => {
        console.log(evtName, evtResult);
      });
    });

    // 监听拆分失败事件，获取拆分失败原因
    editor.on("split_fail", (res) => {
      alert(res.message);
    });
    // 监听合并失败事件，获取合并失败原因
    editor.on("union_fail", (res) => {
      alert(res.message);
    });
  });
});
</script>
   
  <style scoped>
#map_view {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

#edit_view {
  display: flex;
}
#toolControl {
  position: absolute;
  top: 30px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 252px;
  z-index: 1001;
}

.toolItem {
  width: 40px;
  height: 40px;
  float: left;
  margin: 1px;
  padding: 4px;
  border-radius: 3px;
  background-size: 30px 30px;
  background-position: 4px 4px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px 0 #e4e7ef;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.toolItem:hover {
  border-color: #789cff;
}

.active {
  border-color: #d5dff2;
  background-color: #d5dff2;
}

#marker {
  background-image: url("https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png");
}

#polyline {
  background-image: url("https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png");
}

#polygon {
  background-image: url("https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png");
}

#circle {
  background-image: url("https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png");
}

#rectangle {
  background-image: url("https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png");
}

#ellipse {
  background-image: url("https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png");
}
</style>